import React from 'react';

/**
 * 注意: 触发更新生命周期需满足三个条件之一:
 * 1. 调用了state
 * 2. 页面强制刷新 forceUpdate()
 * 3. 接收了新的props
 */

class Handler extends React.Component {
  state = {
    age: 2
  }
  componentDidUpdate(prevProps, prevState) {
    console.log('componentDidUpdate: 我是父组件更新阶段第二个执行的生命周期')
    console.log(prevProps, prevState)
  }
  changeAge = () => {
    this.setState({
      age: this.state.age + 1
    })
  }
  force = () => {
    this.forceUpdate()
  }
  render() {
    console.log('render: 我是父组件更新阶段第一个执行的生命周期')
    return(
      <div>
        <p>父组件更新阶段的生命周期</p>
        <h4>{ this.state.age }</h4>
        <button onClick={ this.changeAge }>更新</button>
        <button onClick={ this.force }>强制刷新</button>
        <hr />
        <Son age={ this.state.age }/>
      </div>
    )
  }
}

class Son extends React.Component {
  componentDidUpdate() {
    console.log('componentDidUpdate: 我是子组件更新阶段第二个执行的生命周期')
  }
  render() {
    console.log('render: 我是子组件更新阶段第一个执行的生命周期')
    return (
      <div>
        <p>我是子组件</p>
        <p>{ this.props.age }</p>
      </div>
    )
  }
}

export default Handler